<template>
	<view class="Home">
		<view class="status_bar"></view>
		<uni-swiper-dot :info="banners" :current="current" :dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" autoplay circular>
				<swiper-item @tap="goRedirect(item)" v-for="(item ,index) in banners" :key="index" >
					<view class="swiper-item">
						<image :src="item.src" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="tabs">
			<view v-for="item in categories" :key="item.id" class='tab-item' @tap="goToCategorieDetail(item)">
				<view class="img">
					<image :src="item.icon"></image>
				</view>
				<text class='tab-text'>{{item.name}}</text>
			</view>			
		</view>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="item in listData.docs" :key="item.id">
				<view class='Advertisement' @tap="goToDetail(item)" v-if="item.ad">
					<view class='bgtilte'><text>{{item.title1}}</text></view>
					<view><image :src="item.thumb" mode="widthFix"></image></view>
					<text class='smallTitle'>{{item.title2}}</text>
				</view>
				<view class="uni-media-list" @tap="goToDetail(item)" v-else>
					<image class="uni-media-list-logo" :src="item.thumb"></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{ item.title1 }}</view>
						<view class="uni-media-list-text-bottom">
							<view v-if="item.top>1" class='textTop'>置顶*</view>
							<view v-else class='text'>{{ item.date }}</view>
							<view class='text'>{{item.comments>10000?'1w+':item.comments}}<image src="../../../static/img/pinglun.png" mode=""></image></view>
							<view class='text'>{{item.likes>10000?'1w+':item.likes}}<image src="../../../static/img/dianzan.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nomore" v-if="tips"><text>{{tips}}</text></view>
		
	</view>
	
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	import {
		BASE_IMAGE_URL,
		homebanner,
		contentlist,
		adlist,
		getRongYunToken
	} from '@/utils/api'
	
	// #ifdef APP-PLUS
		const rongIm = uni.requireNativePlugin('GZF-RongIM');
		
		var screenWidth = plus.screen.resolutionWidth;
		var screenHeight = plus.screen.resolutionHeight;
		var nvMask = null;
	// #endif	

	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				banners: [],  //轮播
				categories:[], //分类导航
				current: 0,  //录播当前页
				dotsStyles:{},
				page:1, //列表当前页码
				listData:{ // 列表数据
					docs:[],
					"totalDocs": 1,
					"limit": 10,
					"hasPrevPage": false,
					"hasNextPage": true,
					"page": 1,
					"totalPages": 1,
					"pagingCounter": 1,
					"prevPage": null,
					"nextPage": null
				},
				tips:'', //没有列表的提示文案
				rongLogin: false,
			};
		},
		async onReady() {
			// #ifdef APP-PLUS
			// this.$refs.mixAdvert.initAdvert();
			// this.homeSplash();
			// #endif
		},
		async onLoad(e) {
			// uni.showLoading({
			// 	title:"加载中..."
			// });
			
			//获取banner和分类
			this.getBanner()
			//获取首页列表
			this.getList()

			// #ifdef APP-PLUS
				if((uni.getSystemInfoSync().platform == 'ios') && !uni.getStorageSync("auth_token")){
					// this.createView();
					// setTimeout(()=>{
					// 	if(nvMask){
					// 		nvMask.hide();
					// 	}
					// }, 1000);
				}
			// #endif
			
			
			// uni.setStorageSync("rongLogin", false);
			// // #ifdef APP-PLUS
			// if(uni.getStorageSync("auth_token") && !uni.getStorageSync("rongLogin") ){
			// 	this.getRongYunToken();
			// }
			// // #endif
		},
		onShow() {
			uni.hideKeyboard()
			this.showSplash = false;
			let detailId = uni.getStorageSync("detailId");
			let HomeLike = uni.getStorageSync("HomeLike");
			let HomeComment = uni.getStorageSync("HomeComment");
			this.listData.docs.map(item=>{
				if(item.id == detailId){
					if(HomeLike>-1){
						item.likes = HomeLike
					}
					if(HomeComment>-1){
						item.comments = HomeComment
					}
				}
			})
			console.log("login-----"+uni.getSystemInfoSync().platform);
			// #ifdef APP-PLUS
			if(uni.getStorageSync("auth_token") && !this.rongLogin ){
				this.getRongYunToken();
			}
			// #endif
		},
		onPullDownRefresh(){
			this.page = 1, //列表当前页码
			this.listData.hasNextPage = true
			this.tips = '', //没有列表的提示文案
			
			//获取首页列表
			this.getList()
		},
		methods: {
			getChatMsg(){
				rongIm.getChatMsg('', result => {
					let num = 0;
					rongIm.getMsgList("", resu => {
						let resul = JSON.parse(resu);
						if(resul && resul.length>0){
							resul.map((item) => {
								if(item.unreadMessageCount){
									num += parseInt(item.unreadMessageCount);
								}
							});
							
							console.log("num-------------"+num);
							if(num == 0){
								uni.removeTabBarBadge({
									index: 1
								})
							}else{
								uni.setTabBarBadge({
								  index: 1,
								  text: num>99? '99+' : + num+''
								})
							};
							
						}
					});
				})
			},
			createView(){
				nvMask = new plus.nativeObj.View("nvMaskShare", {
				  top: '0px',
				  left: '0px',
				  height: '100%',
				  width: '100%',
				  backgroundColor: 'rgba(0,0,0,0.2)'
				});
				nvMask.draw([
					{
					  tag: 'img',
					  id: 'imgwechatfriend',
					  src: '/static/splash/splash.png',
					  position: {
					    top: 0,
					    left: 0
					  }
					}
				]);
				nvMask.show();
			},
			async getRongYunToken(){
				let num = 0;
				let res = await getRongYunToken();
				if (res.status == 0) {
					rongIm.login(JSON.stringify(res.data),
						result => {
							this.getChatMsg();
							if(rongIm){
								rongIm.getMsgList("", resu => {
									let resul = JSON.parse(resu);
									if(resul && resul.length>0){
										resul.map((item) => {
											if(item.unreadMessageCount){
												num += parseInt(item.unreadMessageCount);
											}
										});
										
										console.log("num-------------"+num);
										if(num == 0){
											uni.removeTabBarBadge({
												index: 1
											})
										}else{
											uni.setTabBarBadge({
											  index: 1,
											  text: num>99? '99+' : + num+''
											})
										};
										
									}
								});
							}
							
							this.rongLogin = true;
							uni.hideLoading();
						});
				}
			},
			goRedirect(item){
				if(item.redirect){
					if(item.redirect.path){
						if(item.redirect.path=='Video_Detail'){
							const { id,stage } = item.redirect.params
							let urlBefore = ''
							if(stage == 10){
								urlBefore = '/pages/liveNotStart/liveNotStart'
							}else if(stage == 20){
								urlBefore = '/pages/liveing/liveing'
							}else if(stage == 30){
								urlBefore = '/pages/liveEndNot/liveEndNot'
							}else if(stage == 40){
								urlBefore = '/pages/liveEnd/liveEnd'
							}
							uni.navigateTo({
							    url: urlBefore+'?id='+id
							});
						}else if(item.redirect.path=='News_Detail'){
							const { id } = item.redirect.params
							uni.navigateTo({
							    url: '/pages/zazhi/zazhi?id='+id
							});
						}
					}else{
						uni.navigateTo({
						    url: '/pages/webview1/webview1?src='+item.redirect.href
						});
					}
				}
			},
			async getBanner(){
				let data = await homebanner() 
				if(data.status == 0){
					this.banners = data.data.banners || []
					this.categories = data.data.categories || []
				}else{
					uni.showToast({
						icon: 'none',
						title: data.message,
						duration: 1000
					});
				}
			},
			//获取首页列表数据
			async getList(){
				if(this.listData.hasNextPage){
					uni.showLoading({});
					let data = await contentlist({
						category:'',
						limit:10, 
						page:this.page,
					})
					let addata = await adlist({category:''})
					uni.hideLoading();

					if(addata.status == 0){
						addata.data.map(item=>{
							item.ad = true
						})
					} 
					
					if(data.status == 0){
						data.data.docs.map((item,index)=>{
							if(index == 3 && addata.data && addata.data[this.page-1]){
								data.data.docs.splice(index,0,addata.data[this.page-1])
							}
						})
						let docs = []
						if(this.page == 1){
							docs = data.data.docs
						}else{
							docs = [...this.listData.docs,...data.data.docs]
						}
						this.page = this.page+1
						data.data.docs = docs
						this.listData = data.data
						console.log(this.listData,'=======')
					}
				}else{
					this.tips = '没有更多数据了'
				}
			},
			change(e) {
				this.current = e.detail.current
			},
			goToDetail(item){
				if(item.type == 'Video'){
					let urlBefore = ''
					if(item.stage == 10){
						urlBefore = '/pages/liveNotStart/liveNotStart'
					}else if(item.stage == 20){
						urlBefore = '/pages/liveing/liveing'
					}else if(item.stage == 30){
						urlBefore = '/pages/liveEndNot/liveEndNot'
					}else if(item.stage == 40){
						urlBefore = '/pages/liveEnd/liveEnd'
					}
					uni.navigateTo({
					    url: urlBefore+'?id='+item.id+'&ad='+(item.ad || '')
					});
				}else if(item.type == 'News'){
					let url = ''
					if(item.ad){
						url = '/pages/zazhi/zazhi?id='+item.detail+'&ad='+item.id
					}else{
						url = '/pages/zazhi/zazhi?id='+item.id
					}
					uni.navigateTo({
					    url: url
					});
				}
			},
			goToCategorieDetail(item){
				uni.navigateTo({
				    url: '/pages/meetinglive/meetinglive?name='+item.name+'&id='+item.id
				});
			},
			
		},
		onReachBottom(){
			console.log('到达底部')
			clearTimeout(this.listTimer)
			this.listTimer = setTimeout(()=>{
				this.getList()
			},300)
		}
	};
</script>

<style lang="scss">
	.Home{
		.textTop{
			font-size:24upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(220,87,87,1);
			line-height:36upx;
		}
		.Advertisement{
			z-index: 10;
			padding: 39upx 32upx;
			width: 100%;
			height: auto;
			.bgtilte{
				margin-bottom: 14upx;
				text{
					font-size:30upx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:1;
				}
			}
			.smallTitle{
				font-size:24upx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(153,153,153,1);
			}
			image{
				width: 100%;
			}
		}
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		 }
		.swiper-box {
			height: 313upx;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			background: #eee;
			color: #fff;
		}

		.swiper-item image {
			width: 100%;
			height: 100%;
		}

		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 38upx 20upx;
			.tab-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.img {
				width: 114upx;
				height: 114upx;
				box-shadow: 0 0 5px rgba(128, 0, 128, .2);
				border-radius: 50%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 60%;
					height: 60%;
				}
			}

			text {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-top: 8upx;
			}
		}
		.uni-media-list-logo {
			width: 200upx;
			height: 120upx;
			margin-right: 40upx;
		}
		
		.uni-media-list-body {
			height: auto;
			justify-content: space-around;
		}
		.uni-media-list{
			padding: 38upx 32upx;
		}
		.uni-media-list-text-top {
			height: 74upx;
			font-size: 28upx;
			overflow: hidden;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2;
			overflow:hidden;
		}
		
		.uni-media-list-text-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 15upx;
			color:#999;
			.text{
				display: flex;
				align-items: center;
				justify-content: center;
			}
			image{
				width: 25upx;
				height: 24upx;
				margin-left: 8upx;
				margin-top: -4upx;
			}
		}	
		.uni-list-cell::after{
			left: 0;
			background-color: rgba(244,244,244,1);
		}
		.uni-list::before,.uni-list:after{
			background-color: rgba(244,244,244,1);
		}
		.nomore{
			text-align: center;
			text{
				line-height: 120upx;
				color: #333;
			}
		}
	}
</style>
